<template>
  <div
    id="top_styl"
    class="top_styl"
  >
    <div class="top_content">
      <div
        class="top_left"
        v-if="!!store_userInfo.userName"
      >
        <div class="title_styl">
          <div class="title_left">您好{{ store_userInfo.userName }}，欢迎来到振华石油商城！</div>
          <Lines
            class="line_styl"
            backColor="#ffffff"
            marginLeftright="10px"
          ></Lines>
          <div
            class="title_login"
            @click="loginOutFun"
          >退出</div>
        </div>
      </div>
      <div
        class="top_left"
        v-else
      >
        <div class="title_styl">
          <div class="title_left">您好，欢迎来到振华石油商城！</div>
          <div class="title_right">请，</div>
          <div
            class="title_login"
            @click="toPageFun('/login')"
          >登录</div>
          <Lines
            class="line_styl"
            backColor="#ffffff"
            marginLeftright="10px"
          ></Lines>
          <div
            class="title_register"
            @click="toPageFun('/register')"
          >注册</div>
        </div>
      </div>
      <div class="top_right">
        <div class="phone_styl">
          <Icons
            font="#icon-dianhua-copy"
            class="icon-dianhua-copy"
            fontSize="16px"
          ></Icons>+(86) 546-887 8888
        </div>
        <Lines
          class="line_styl"
          backColor="#ffffff"
          marginLeftright="10px"
        ></Lines>
        <div
          @click="toPageFun('/')"
          class="right_title"
        >首页</div>
        <Lines
          class="line_styl"
          backColor="#ffffff"
          marginLeftright="10px"
        ></Lines>
        <!-- <div class="right_title">关于振华</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "index",
  components: {},
  data() {
    return {
      userInfo: this.store_userInfo,
    };
  },
  computed: {
    ...mapGetters(["store_userInfo"]),
  },
  mounted() { },
  methods: {
    ...mapMutations(["set_token", "set_userInfo", "set_loginInfo", "set_goodsInfo"]),

    loginOutFun() {
      this.$Modal.confirm({
        title: "确认",
        content: `确认要退出登录？`,
        loading: true,
        onOk: () => {
          this.$Message.success('退出成功!');
          this.set_token('');
          this.set_userInfo('');
          this.set_goodsInfo([]);
          this.$Modal.remove();
        }
      });
    },
    toPageFun(path) {
      this.$router.push(path);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
.top_styl {
  position: sticky;
  top: 0;
  min-width: 1185px;
  .flex-x(center);
  font-size: 12px;
  height: 30px;
  width: 100%;
  z-index: 1002;
  text-align: center;
  color: #ffffff;
  background-color: #2a2e3f;
  .icon-liwu {
    margin-bottom: 3px;
  }
  .top_content {
    .flex-x();
    min-width: 1185px;
    height: 100%;
    //   background-color: rgb(74, 126, 79);
    .top_left {
      .flex-x(flex-start);
      .title_styl {
        .flex-x();
        .title_left {
        }
        .title_right {
        }
        .title_login {
          color: #f9c50c;
          cursor: pointer;
        }
        .title_register {
          cursor: pointer;
        }
      }
    }
    .top_right {
      .flex-x();
      .phone_styl {
        .flex-x(flex-start);
        .icon-dianhua-copy {
          margin-right: 6px;
        }
      }
      .right_title {
        cursor: pointer;
      }
    }
  }
}
</style>
